<template>
    <h2>房产表</h2>
    <el-button type="primary" plain @click="addmsg">添加</el-button>
  <el-table :data="tableData" height="500" border style="width: 100%">
    <el-table-column label="序号" width="120">
      <template v-slot="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="Hnum" label="房号" width="120">
    </el-table-column>
    <el-table-column prop="Harea" label="住房面积" width="120">
    </el-table-column>
    <el-table-column prop="Hallocation" label="分配标志" width="120">
    </el-table-column>
    <el-table-column prop="Urentmeter" label="每平方米房租" width="120">
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button size="mini" @click="handleEdit(scope.row.Hnum,scope.$index)">修改</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row.Hnum)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
  title="修改信息"
  v-model="dialogVisible"
  width="30%"
  :before-close="handleClose">
   <div>
    <el-form ref="form" :model="afrom" label-width="130px">
  <el-form-item label="房号">
    <el-input v-model="afrom.hnum"></el-input>
  </el-form-item>
   <el-form-item label="住房面积">
    <el-input v-model="afrom.harea"></el-input>
  </el-form-item>
   <el-form-item label="分配标志">
    <el-input v-model="afrom.hallocation"></el-input>
  </el-form-item>
   <el-form-item label="每平方米房租">
    <el-input v-model="afrom.urentmeter"></el-input>
  </el-form-item>
</el-form>
  </div> 
  <template v-slot:footer>
     <span class="dialog-footer">
    <el-button @click="dialogVisible = false">取消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
  </template>
</el-dialog>
 <el-dialog
  title="添加信息"
  v-model="diaaddlogVisible"
  width="50%"
  :before-close="handleClose">
   <div>
    <el-form ref="form" :model="adfrom" label-width="130px">
  <el-form-item label="房号">
    <el-input v-model="adfrom.hnum"></el-input>
  </el-form-item>
   <el-form-item label="住房面积">
    <el-input v-model="adfrom.harea"></el-input>
  </el-form-item>
   <el-form-item label="分配标志">
    <el-input v-model="adfrom.hallocation"></el-input>
  </el-form-item>
   <el-form-item label="每平方米房租">
    <el-input v-model="adfrom.urentmeter"></el-input>
  </el-form-item>
</el-form>
  </div> 
  <template v-slot:footer>
     <span class="dialog-footer">
    <el-button @click="diaaddlogVisible = false">取消</el-button>
    <el-button type="primary" @click="confirm1">确 定</el-button>
  </span>
  </template>
</el-dialog>
</template>
<script>
export default {
    data() {
    return {
      tableData: [],
      addfrom: {
        hnum: "",
        harea:"",
        hallocation: "",
        urentmeter:"",
      },
      afrom:{
        hnum: "",
        harea:"",
        hallocation: "",
        urentmeter:"",
      },
      adfrom:{
        hnum: "",
        harea:"",
        hallocation: "",
        urentmeter:"",
      },
      dialogVisible: false,//弹框的显示
      diaaddlogVisible:false,
      userIndex:0,
    };
  },
  mounted() {
    this.$http
      .get("api/auth/property")
      .then((response) => (this.tableData = response.data));
  },
  methods: {
    //删除数据
    async handleDelete(idx, hnum) {
      // this.$confirm("确认删除？")
      //   .then((_) => {
      //     this.tableData.splice(idx, 1);
      //   })
      //   .catch((_) => {});
      this.tableData.splice(idx, 1);
      console.log(hnum)
      const { data: res } = await this.$http.delete("api/auth/deproperty?id=" + hnum);
    },
    //修改数据
    async handleEdit(all,idx){
      this.dialogVisible=true;
      this.userIndex=idx;
      const{data:res}=await this.$http.delete("api/auth/deproperty?id="+all)
      this.dialogVisible=true;
    },
    async confirm(){
      this.dialogVisible=false;
      const{data:res}=await this.$http.post("api/auth/modiproperty",this.afrom)
    },
    //添加数据
    addmsg(){
      this.diaaddlogVisible=true;
    },
    async confirm1(){
      this.diaaddlogVisible=false;
      var ad=this.adfrom
      const{data:res}=await this.$http.post("api/auth/adproperty",this.adfrom)
    }
  },
}
</script>
